<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    .container {
      background: black;
      position: relative;
      border: 1px solid #ddd;
      width: 450px;
      height: 450px;
    }
    .sparkLine {
      position: absolute;
      transform-origin: left top;

    }
    .sparkLine .sparkParticle {
      width: 1px;
      height: 1px;
      float: left;
      color: white;
      background: white;
      box-shadow: 0 0 10px white;
      opacity: 0;
    }
    @keyframes fade {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }
    .sparkLine .sparkParticle {
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sparkLine" style="">
      <div class="sparkParticle"></div>
    </div>
  </div>
  <script type="text/javascript">
    function createLine(color, left, top, width, height, length, deg, size, speed) {
      const sparkLine=document.createElement("div");
      sparkLine.className="sparkLine";
      sparkLine.style.top=`${top}px`;
      sparkLine.style.left=`${left}px`;
      sparkLine.style.width=`${length}px`;
      sparkLine.style.height=`${height}px`;
      sparkLine.style.transform=`rotateZ(${deg}deg)`;
      for(let i = 0; i < size; i++){
        const sparkParticle=document.createElement("div");
        sparkParticle.className="sparkParticle";
        sparkParticle.style.animation=`fade ${speed}s ${i/100}s infinite`;
        sparkParticle.style.width=`${width}px`;
        sparkParticle.style.height=`${height}px`;
        sparkParticle.style.backgroundColor=color;
        sparkLine.append(sparkParticle)
      }
      document.querySelector(".container").append(sparkLine);
    }
    //创建线
    createLine('#102b6a', 20,  20,  2, 2, 418, 0 , 200, 1);//上
    createLine('#102b6a', 418, 20,  2, 2, 418, 90, 200, 1);//右
    createLine('#102b6a', 20,  418, 2, 2, 418, 0 , 200, 1);//下
    createLine('#102b6a', 20,  20,  2, 2, 418, 90, 200, 1);//左
  </script>
</body>
